<template>
  <div id="app">
    <header>
      <!--<p>充值金额：44731.6</p>-->
      <!--<p>实际到账：<span class="baseColor">44731.6</span></p>-->
      <div><span>充值金额：</span><input type="text" v-model="amt" placeholder="请输入充值金额"></div>
      <div><span>实际到账：</span><p class="baseColor">{{amt}}</p></div>
    </header>
    <div class="code">
      <span>验证码</span>
      <input type="text" placeholder="请输入短信验证码" v-model="smsCode">
      <a class="baseColor"  @click="_queryRecharge">获取验证码</a>
    </div>
    <a class="btnSmall" @click="_confirmRecharge">确定</a>
    <footers :navIndex="1"></footers>
  </div>
</template>

<script>
  import {localStorageGet} from '../../../assets/js/localStorage'
  import footers from '../../commonList/Footer.vue'
  export default {
    name: "recharge-confirm",
    components: {
      footers
    },
    data() {
      return {
        amt:'',
        bankSerialOrderNo:'',
        smsCode:''
      }
    },
    methods: {
      _specificationHandler(index) {
        this.specificationIndex = index
      },
      _queryRecharge() {
        let params = {
          requestNo: '1111122444',
          orderNo: '122232324342',
          amt: this.amt,
          userUid: localStorageGet('userUid'),
          productName: '2018041223344',
          channelType: 'YIBAO',
          sysTag: 'ssmall'
        }
        let _this = this
        this.$http({
          url: '/bank/trade/auth/order/biz/pre',
          method: 'post',
          data: params,
          transformRequest: [function (data) {
            data = _this.$Qs.stringify(data);
            return data;
          }],
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
          .then(function (response) {
            console.log(response);
            _this.bankSerialOrderNo = response.data.data.bankSerialOrderNo
          })
          .catch(function (error) {
            console.log(error);
          })
      },
      _confirmRecharge() {
        let params = {
          requestNo: '1111122444',
          bankSerialOrderNo: this.bankSerialOrderNo,
          smsCode:this.smsCode,
          channelType: 'YIBAO',
          sysTag: 'ssmall',
          userUid: localStorageGet('userUid'),
          tradeDate: '20180410220322',
          bindOrderNo: this.bankSerialOrderNo
        }
        let _this = this
        this.$http({
          url: '/bank/trade/auth/order/biz/ack',
          method: 'post',
          data: params,
          transformRequest: [function (data) {
            data = _this.$Qs.stringify(data);
            return data;
          }],
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
          .then(function (response) {
            _this.$Toast(response.data.msg)
            _this.$router.push('/user' )

          })
          .catch(function (error) {
            console.log(error);
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      margin: 1rem 0.5rem 0;
      div {
        display: flex;
        font-size: 0.64rem;
        line-height: 1.5rem;
        span {
          flex: 2.5;
        }
        input {
          flex: 7.5;
          outline: none;
          font-size: 0.55rem;
          border: 0;
          background: #f5f5f5;
        }
        p {
          flex: 7.5;
          font-size: 1rem;
        }
      }
    }
    .code {
      background: #f6f6f6;
      font-size: 0.64rem;
      line-height: 3.28rem;
      padding: 0 0.5rem;
      display: flex;
      text-align: center;
      margin: 1.89rem 0;
      span {
        flex: 2;
      }
      input {
        flex: 5;
        height: 1.92rem;
        margin-top: 0.6rem;
        outline: none;
        border: 0;
        padding-left: 0.5rem;
        box-sizing: border-box;
      }
      a {
        flex: 3;
      }
    }
  }
</style>
